<%@ page language="java" contentType="text/html; charset=ISO-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hot Site</title>
<link rel="stylesheet" href="../../resources/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
	href="../../resources/bootstrap/css/bootstrap-theme.css">
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-12 well">
				<h2>
					<i class=".glyphicon .glyphicon-user"></i> New Customer
				</h2>
				<form action="add" method="post">

					<div>
						<ul class="nav nav-tabs">
							<li class="active"><a href="#customer-info" data-toggle="tab">Customer</a></li>
							<li><a href="#address-info" data-toggle="tab">Address</a></li>
							<li><a href="#contact-info" data-toggle="tab">Contact</a></li>

						</ul>
					</div>

					<div class="tab-content">
						<!-- Customer Info -->
						<div id="customer-info" class="tab-pane active fade in col-md-6">

							<div class="form-group">
								<label class="control-label" for="customer-name">Name</label> <input
									type="text" class="form-control" id="customer-name"
									name="customer.name" />
							</div>

							<div class="form-group">
								<label class="control-label" for="customer-email">e-Mail</label>
								<input type="text" class="form-control" id="customer-email"
									name="customer.email" />
							</div>

							<div class="form-group">
								<label class="control-label" for="customer-phone">Phone</label>
								<input type="text" class="form-control" id="customer-phone"
									name="customer.phone" />
							</div>

						</div>
						<!--/ Customer Info -->

						<!-- Address Info -->
						<div id="address-info" class="tab-pane fade out col-md-6">

							<div class="form-group">
								<label class="control-label" for="address">Address</label> <input
									type="text" class="form-control" id="address" name="address" />
							</div>

							<div class="form-group">
								<label class="control-label" for="city">city</label> <input
									type="text" class="form-control" id="city" name="city" />
							</div>

							<div class="form-group">
								<label class="control-label" for="state">State</label> <input
									type="text" class="form-control" id="state" name="state" />
							</div>

							<div class="form-group">
								<label class="control-label" for="country">Country</label> <input
									type="text" class="form-control" id="country" name="country" />
							</div>



						</div>
						<!--/ Address Info -->


						<div id="contact-info" class="tab-pane fade in
						 col-md-6">

							<div class="form-group">
								<label class="control-label" for="contact-facebook">Facebook</label>
								<input type="text" class="form-control" id="contact-facebook"
									name="contact-facebook" />
							</div>

							<div class="form-group">
								<label class="control-label" for="contact-twitter">Twitter</label>
								<input type="text" class="form-control" id="contact-twitter"
									name="contact-twitter" />
							</div>

							<div class="form-group">
								<label class="control-label" for="contact-gplus">G++</label> <input
									type="text" class="form-control" id="contact-gplus"
									name="contact-gplus" />
							</div>


						</div>



					</div><!-- / tab-content -->
					
					<div class="row">
						<div class="col-sm-offset-8 col-md-4">
							<button type="submit" id="save" class="btn btn-primary btn-block">Save</button>
						</div>
					</div>

				</form>
			</div>

		</div>
	</div>
	<script type="text/javascript"
		src="../resources/bootstrap/js/jquery-1.10.2.js"></script>
	<script type="text/javascript"
		src="../resources/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript"
			src="../resources/app/customer/customer-controller.js"></script>
	<script type="text/javascript"
			src="../resources/app/customer/city-controller.js"></script>
	
	<script>
		
		$(function() {
			
			var customerController = new CustomerController();
			
			/* $('#save').on('click', function(){
				customerController.save();	
			});	 */
			
		});
		
	
	</script>	
</body>
</html>